<template>
	<popupBox ref="pay" type="bottom" :isSlot="true">
		<view class="pay-box">
			<view class="top">
				<image :src="$img_path('/course/close_popup.png')" @click="$refs.pay.close()" mode="widthFix"></image>
			</view>
			<view class="price">
				<view class="price-text">
					<text>应付金额</text>
				</view>
				<view class="num">
					<text>￥</text>{{ amount }}
				</view>
			</view>
			<view class="pay-type">
				<view class="item" @click="payTypeChange(0)">
					<view class="left">
						<image :src="$img_path('/course/pay_1.png')" mode="widthFix"></image>
						<view class="name">
							<text>微信支付</text>
						</view>
					</view>
					<view class="right">
						<image v-if="payType == 0" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" @click="payTypeChange(2)">
					<view class="left">
						<image :src="$img_path('/course/pay_2.png')" mode="widthFix"></image>
						<view class="name">
							<text>第三方支付</text>
						</view>
					</view>
					<view class="right">
						<image v-if="payType == 2" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" @click="payTypeChange(4)">
					<view class="left">
						<image :src="$img_path('/course/pay_3.png')" mode="widthFix"></image>
						<view class="name">
							<!-- <text>余额（¥ 100.00）</text> -->
							<text>余额：¥ {{ userinfo.money }}</text>
						</view>
					</view>
					<view class="right">
						<image v-if="payType == 4" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="btn">
				<view class="b-box">
					<button @click="payOrder">确认支付</button>
				</view>
			</view>
		</view>
	</popupBox>
</template>

<script>
	import { getBalance } from '@/utils/api/serviceApi.js'
	import popupBox from '@/components/popup/popup'
	export default {
		components: {
			popupBox
		},
		props: {
			amount: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				userinfo: {
					money: 0
				},
				// 支付方式:0=微信小程序,1=微信APP,2=公众号支付,3=支付宝APP,4=余额
				payType: 0
			}
		},
		mounted() {
			// this.userinfo = uni.getStorageSync("userinfo")
			getBalance().then(res=>{
				this.userinfo.money = res.data
			})
		},
		methods: {
			open() {
				this.$refs.pay.open()
			},
			close() {
				this.$refs.pay.close()
			},
			payOrder() {
				console.log("确认支付")
				this.$emit("confirm", {
					payType: this.payType
				})
				// this.close()
			},
			payTypeChange(type) {
				this.payType = type
			}
		}
	}
</script>

<style scoped lang="scss">
	.pay-box {
		.top {
			padding: 48rpx 22rpx 0;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.price {
			padding: 85rpx 0 0;

			.num {
				text-align: center;
				font-weight: 900;
				font-size: 68rpx;
				color: #FF2E2E;
				line-height: 68rpx;

				text {
					font-weight: 400;
					font-size: 30rpx;
				}
			}
			
			.price-text {
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;
				color: #999999;
				margin-bottom: 20rpx;
			}
		}

		.pay-type {
			padding: 83rpx 22rpx 0;

			.item {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				&:not(:first-child) {
					margin-top: 58rpx;
				}

				.left {
					display: flex;
					align-items: flex-start;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						display: flex;
						flex-direction: column;

						text {
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							line-height: 48rpx;
							margin-left: 16rpx;

							&:nth-child(2) {
								font-weight: bold;
								font-size: 26rpx;
								color: #000000;
								line-height: 36rpx;
								margin-top: 6rpx;
							}
						}
					}
				}

				.right {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.btn {
			padding: 92rpx 30rpx 20rpx;

			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
			// background: #FFFFFF;
			.b-box {
				width: 100%;
				height: 96rpx;
			}

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
</style>